<template>
  <div>
    <div class="picker-item">
      <CloudDatePicker :default-value="moment('2015/01/01', dateFormat)" :format="dateFormat" />
    </div>
    <div class="picker-item">
      <CloudDatePicker
        :default-value="moment('01/01/2015', dateFormatList[0])"
        :format="dateFormatList"
      />
    </div>
    <div class="picker-item">
      <CloudMonthPicker :default-value="moment('2015/01', monthFormat)" :format="monthFormat" />
    </div>
    <div class="picker-item">
      <CloudRangePicker
        :default-value="[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]"
        :format="dateFormat"
      />
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    title: '10.日期格式',
    subTitle: '使用 format 属性，可以自定义日期显示格式。',
    data () {
      return {
        dateFormat: 'YYYY/MM/DD',
        monthFormat: 'YYYY/MM',
        dateFormatList: ['DD/MM/YYYY', 'DD/MM/YY'],
      }
    },
    methods: {
      moment,
    }
  }
</script>

<style lang="scss">
</style>